<script lang="ts">
export default ({
  props: {
    src: String,
    epsideoId: Number
  },
  data() {
    return {
      fullscreen: false
    }
  },
  emits: ['onPlayerEndedEmitted'],
  methods: {
    // 播放结束自动切换集
    $onPlayerEnded() {
      this.$emit('onPlayerEndedEmitted')
    },
    // 全屏时切换横向展示
    $fullscreenChange() {
      this.fullscreen = !this.fullscreen
      plus.screen.lockOrientation(this.fullscreen ? 'landscape' : 'portrait-primary')
    },
  }
})
</script>

<script module="videojs" lang="renderjs">
export default {
  mounted() {
    // 初始化播放器
    if(typeof window.videojs === 'function'){
      this.initVideo()
    }else{
      // 创建标签引入videojs地址，加载完成初始化
      const script = document.createElement('script')
      script.src = 'https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js'
      script.onload = this.initVideo.bind(this)
      document.head.appendChild(script)
    }
  },
  methods: {
    initVideo(){
      const oVideo = document.createElement('video')
      oVideo.id = 'zc_video'
      oVideo.style.width = '100%'
      oVideo.style.height = '100%'
      oVideo.className = 'video-js vjs-default-skin vjs-big-play-centered'
      const oVideoContainer = document.querySelector('#video_container')
      oVideoContainer.appendChild(oVideo)

      this.player = videojs(oVideo, {
        fill: true, // 填充模式
        controls: true, // 控制器
        playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2.0],
      })
       // 视频加载完毕准备播放触发
      this.player.on('loadedmetadata', this.onPlayerReady.bind(this))
      // 点击全屏触发
      this.player.on('fullscreenchange', this.onFullscreenChange.bind(this))
      // 视频播放结束触发
      this.player.on('ended', this.onPlayerEnded.bind(this))
      // 切换播放速度触发
      this.player.on('ratechange', this.onRateChange.bind(this))
      // 获取缓存中的播放速度
      this.playBackRate = localStorage.getItem('playBackRate') ? Number(localStorage.getItem('playBackRate')) : 1
      // 设置播放地址
      this.src && this.playSrc(this.src)
    },
    // 将加载好的视频资源执行播放
    onPlayerReady() {
      // 播放
      this.player.play()
      // 设置最新的播放速度
      this.player.playbackRate(this.playBackRate)
      // 已经在播放时才能更改
      this.speed=true
    },
    // 全屏
    onFullscreenChange() {
      // 执行vue method的方法 横向全屏
      this.$ownerInstance.callMethod('$fullscreenChange')
    },
    // 指定播放地址和类型
    playSrc(src) {
      this.player.src({ src, type: 'application/x-mpegURL' })
    },
    // 播放结束自动切换下一集
    onPlayerEnded() {
      // 获取上个组件实例中的方法
      this.$ownerInstance.callMethod('$onPlayerEnded')
      // 控制播放器播放结束执行播放速度置为1倍速
      this.speed=false
    },
     // 更改播放速度
    onRateChange() {
      // 只有视频播放时才能更改播放速度
      if(this.speed){
       // 播放速度存入缓存
       localStorage.setItem('playBackRate', this.player.playbackRate().toString())
       // 执行更改播放速度
       this.playBackRate = this.player.playbackRate()
      }
    },
    // 当播放地址更新,播放新的视频
    onChangeSrc(newSrc) {
      if (newSrc !== '' && this.player) {
        this.playSrc(newSrc)
      } else {
        setTimeout(() => {
          this.playSrc(newSrc)
        }, 500);
      }
      this.speed=false
    }
  }
}
</script>

<template>
  <view id="video_container" class="video-js w-full h-full" :src="src" :change:src="videojs.onChangeSrc"></view>
</template>

<style>
@import 'https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/alt/video-js-cdn.min.css';
</style>